<template>
    <div class="gift-top" v-if="content">
        <router-view v-if="$route.params.id"></router-view>
        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            class="noticeList f-mp0"  v-else>
            <router-link tag="li" v-for="(item,index) in content" :key="index" :to="`/notice/${item.id}`" class="f-dfc">
                <img src="../assets/notimg.png"/>
                <div>
                    <h4 class="f-fs14 not-title">{{item.title}}</h4>
                    <p class="not-time f-mp0">{{item.create_time | formatDate}}</p>
                    <p class="f-thd f-ib f-666 not-text f-w100">{{item.content | repHtml}}</p>
                </div>
            </router-link>
        </ul>
        <p v-if="loading&&!$route.params.id" class='f-tac notice-tip'>没有更多。。。</p>
    </div>
</template>
<script>
export default {
    name:'notice',
    data(){
        return {
            content:null,
            page:1,
            loading:false
        }
    },
    methods:{
        link(id){
            this.$router.push(`/notice/${id}`)
        },
        loadMore(){
            this.loading=false;
            this.$ajax.Index.noticeList(++this.page).then(({data:{data:{noticelist},sendmsg}})=>{
                if(noticelist){
                    this.content.push(...noticelist);
                    this.loading=false;
                }else{
                    this.loading=true;
                    //vu.$toast(sendmsg);
                }
            })
        }
    },
    created(){
        this.$ajax.Index.noticeList(this.page).then(({data:{data:{noticelist},sendmsg}})=>{
            if(noticelist){
                this.content=noticelist;
            }
        })
    }
}
</script>
<style scoped>
.notice-tip{
    line-height: 3;
    color:#666;
}
.not-time{
    right:0;
    top:.452963rem;
}
.noticeList li{
    align-items: center;
}
.noticeList li div{
    width:80%;
    border-bottom: 1px solid #E8E8E8;
}
.not-title{
    margin-bottom: .148148rem;
}
.noticeList li img{
    width:1.111111rem;
    height: 1.111111rem;
    margin: 0 30px;
}
</style>

